import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('二级导航固定顶部'),
        ),
        body: const HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    // 获取设备的宽度和高度，必须写在build里面
    final size = MediaQuery.of(context).size;

    return Stack(
      children: [
        ListView(
          padding: const EdgeInsets.only(top: 44),
          children: const[
            ListTile(title: Text("我是一个列表啊啊1"),),
            ListTile(title: Text("我是一个列表啊啊2"),),
            ListTile(title: Text("我是一个列表啊啊3"),),
            ListTile(title: Text("我是一个列表啊啊4"),),
            ListTile(title: Text("我是一个列表啊啊4"),),
            ListTile(title: Text("我是一个列表啊啊4"),),
            ListTile(title: Text("我是一个列表啊啊4"),),
            ListTile(title: Text("我是一个列表啊啊4"),),
            ListTile(title: Text("我是一个列表啊啊4"),),
            ListTile(title: Text("我是一个列表啊啊4"),),
            ListTile(title: Text("我是一个列表啊啊4"),),
            ListTile(title: Text("我是一个列表啊啊4"),),
            ListTile(title: Text("我是一个列表啊啊4"),),
            ListTile(title: Text("我是一个列表啊啊4"),),
            ListTile(title: Text("我是一个列表啊啊4"),),
            ListTile(title: Text("我是一个列表啊啊4"),),
          ],
        ),
        Positioned(
            left: 0,
            top: 0,
            width: size.width, //配置子元素宽度，不支持double.infinity
            height: 44, //配置子元素高度
            // child: Row(
            //   children: [
            //     Expanded(
            //         flex: 1,
            //         child: Container(
            //           alignment: Alignment.center,
            //           height: 44,
            //           color: Colors.black,
            //           child: const Text("二级导航", style: TextStyle(
            //               color: Colors.white
            //           ),),
            //         )
            //     )
            //   ],
            // )
            child: Container(
              alignment: Alignment.center,
              height: 44,
              color: Colors.black,
              child: const Text("二级导航", style: TextStyle(
                  color: Colors.white
              ),),
            )
        )
      ],
    );
  }
}
